{ "cells": [ { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "# HyperText Markup Language\n", "\n", "HyperText Markup Language (HTML), is the standard markup language used to create web pages. \n", "\n", "* Used as markup language for basically every website on the internet.\n", "* Developed by the World Wide Web Consortium (W3C).\n", "* The current (and probably final) version is HTML5, a \"Living Standard\"\n", "\n", "\n", "## Resources\n", "\n", "- Lots of offline and online material available\n", "- [MDN HTML reference](https://developer.mozilla.org/en-US/docs/Web/HTML)\n", "- [w3schools HTML tutorial](https://www.w3schools.com/html)\n", " \n", "\n", "## A simple HTML document\n", "\n", "The Hello world version of an HTML document is:\n", "\n", "```html\n", "\n", "\n", "\n", " \n", " \n", " A title for the browser window \n", " \n", " \n", " \n", " \n", "

Hello world!

\n", " \n", " \n", "\n", "```\n", "\n", "Save this file as `index.html` and open it with your favorite web browser, e.g. `open index.html`" ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [], "source": [ "!open index.html" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Syntax\n", "\n", "* The HTML file consists of tags, denoted by ``\n", "* Most HTML elements are marked by a tag pair (start tag and end tag): `content`\n", "* Some HTML elements have no content (and hence no end tag): `` or `
`\n", "* A tag can have attributes, for example: ``\n", "\n", "## Comments\n", "\n", "Comments are enclosed the `` tag:\n", "\n", "```html\n", "\n", "```\n", "\n", "-------------------------------\n", "## Formatting\n", "\n", "### Headings" ] }, { "cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "

I am a header

\n", "

I am a sub-header

\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "\n", "

I am a header

\n", "

I am a sub-header

" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## New lines\n", "\n", "The HTML code for a newline is `
`:" ] }, { "cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [ { "data": { "text/html": [ "Hello world
New lines \n", "\n", "and spaces do not\n", " \n", " \n", " \n", " matter. Use the br tag instead\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "Hello world
New lines \n", "\n", "and spaces do not\n", " \n", " \n", " \n", " matter. Use the br tag instead" ] }, { "cell_type": "markdown", "metadata": { "tags": [] }, "source": [ "## Special characters\n", "\n", "HTML uses special codes to encode special characters, for example for mathematical, technical, and currency symbols, or non-ASCII characters.\n", "\n", "Full list: http://www.w3schools.com/html/html_symbols.asp\n", "\n", "Examples:\n", "\n", "\n", "| Symbol | HTML entity |\n", "| ------------- |:-------------:|\n", "| Å | `Å` |\n", "| å | `å` |\n", "| Ø | `Ø` |\n", "| ø | `ø` |\n", "| Æ | `&Aelig;` |\n", "| æ | `æ` |\n", "| ' | `"` |\n", "| \" | `"` |\n", "| & | `&` |" ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "

\n", "Ås, Sør-Trøndelag\n", "

\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "

\n", "Ås, Sør-Trøndelag\n", "

" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Special characters alternative:\n", "\n", "Save your file with UTF-8 encoding (check your editor), and add the character encoding to your HTML document:\n", "\n", "```html\n", "\n", " \n", "\n", "```\n", "Then you can write ~any special character directly in the document." ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "# Paragraphs" ] }, { "cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [ { "data": { "text/html": [ "

\n", "This is a paragraph.\n", "

\n", "

\n", "This is another paragraph.\n", "

\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "

\n", "This is a paragraph.\n", "

\n", "

\n", "This is another paragraph.\n", "

" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Italic text, bold text and links" ] }, { "cell_type": "code", "execution_count": 9, "metadata": {}, "outputs": [ { "data": { "text/html": [ "Bold text\n", "\n", "
\n", "Italic text\n", "\n", "
\n", "Emphasized text\n", "\n", "
\n", "Strong emphasized text\n", "\n", "
\n", "Strong and emphasized text\n", "\n", " \n", "
\n", "This is a link\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "Bold text\n", "\n", "
\n", "Italic text\n", "\n", "
\n", "Emphasized text\n", "\n", "
\n", "Strong emphasized text\n", "\n", "
\n", "Strong and emphasized text\n", "\n", " \n", "
\n", "This is a link" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "-------------------------------\n", "## Tables" ] }, { "cell_type": "code", "execution_count": 10, "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "

Name	Course	Points
Charles	INF3331	50
Ada	INF4331	94

\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "

Name	Course	Points
Charles	INF3331	50
Ada	INF4331	94

" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Images" ] }, { "cell_type": "code", "execution_count": 11, "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", " $\"Dürer's$ Dürer's Rhinoceros\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "\n", " $\"Dürer's$ Dürer's Rhinoceros" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Styling\n", "\n", "Every HTML document has a default style (background color white, text color black). The default style can be changed with the *style attribute*.\n", "\n", "```html\n", "\n", "```\n", "\n", "Multiple properties can be set with:\n", "```html\n", "\n", "```\n", "\n", "Some Valid property options:\n", "* `width`\n", "* `height`\n", "* `color`\n", "* `background-color`\n", "* `font-family`\n", "* `font-size`\n", "* `text-align`\n" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "### Examples" ] }, { "cell_type": "code", "execution_count": 12, "metadata": {}, "outputs": [ { "data": { "text/html": [ " $\"Dürer's$ Dürer's Rhinoceros\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", " $\"Dürer's$ Dürer's Rhinoceros" ] }, { "cell_type": "code", "execution_count": 13, "metadata": {}, "outputs": [ { "data": { "text/html": [ " $\"This$ \n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", " $\"This$ " ] }, { "cell_type": "code", "execution_count": 14, "metadata": {}, "outputs": [ { "data": { "text/html": [ "

\n", "Some colorful text.\n", "

\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "

\n", "Some colorful text.\n", "

" ] } ], "metadata": { "celltoolbar": "Slideshow", "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.10.12" }, "widgets": { "application/vnd.jupyter.widget-state+json": { "state": {}, "version_major": 2, "version_minor": 0 } } }, "nbformat": 4, "nbformat_minor": 4 }